/**
 * This class is the main view for the application. It is specified in app.js as the
 * "mainView" property. That setting automatically applies the "viewport"
 * plugin causing this view to become the body element (i.e., the viewport).
 *
 */
Ext.define('extjs6test.view.main.Main', {
    extend: 'Ext.panel.Panel',
    xtype: 'app-main',

    requires: [
        'Ext.plugin.Viewport',
        'Ext.window.MessageBox',
        'Ext.list.Tree',
        'extjs6test.view.main.MainController',
        'extjs6test.view.main.MainModel',
        'extjs6test.view.main.List',
        'extjs6test.view.main.TopToolbar',
        'extjs6test.store.MainMenu'
    ],
    controller: 'main',
    viewModel: 'main',
    border: false,
    layout: {
        type: 'border'
    },
    dockedItems: [
        {
            dock: 'top',
            xtype: 'toolbar',
            border: false,
            defaults: {
                border: false,
                style: {
                    "background-color": "#fff"
                }
            },
            style: {
                "margin": 0,
                "padding": 0
            },
            cls: 'toolbar-btn-shadow',
            items: [
                {
                    xtype: 'panel',
                    reference: 'logo',
                    bind: {
                        width: '{logoWidth}',
                        height: '{logoHeight}'
                        // html:'<h2><span class="x-fa fa-th-list" style="margin:0 5px 0 5px;"></span><span id="logoText"' +
                        // 'style="text-align: center;">{logoName}</span></h2>',
                    },
                    layout: {
                        type: 'hbox',
                        align: 'middle'
                    },
                    items: [
                        {xtype: 'label', componentCls: 'x-fa fa-fire'},
                        {
                            xtype: 'label', id: 'logoText', bind: {text: '{logoName}'}, flex: 1,
                            style: {
                                "text-align": "center"
                            }
                        }
                    ],
                    // style: {
                    //     "background-color": '#ADB3B8',
                    //     "font-size": "20px"
                    // }
                    bodyPadding: 10,
                    bodyStyle: {
                        "font-size": "30px",
                        "font-weight": 'bold'
                    }
                },
                {
                    xtype: 'maintop',
                    flex: 1
                }
            ]
        }
    ],
    defaults: {
        border: false
    },

    items: [
        {
            reference: 'treelistContainer',
            region: 'west',
            bind: {
                width: '{logoWidth}'
            },
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            bodyPadding: 2,
            scrollable: true,
            //split:true,
            //collapsible:true,
            items: [
                {
                    xtype: 'treelist',
                    reference: 'treelist',
                    border: false,
                    // ui: 'nav',
                    ui: 'nav-light',
                    expanderFirst:false,
                    store: {
                        type: 'tree',
                        root: {
                            expanded: true,
                            children: [
                                {
                                    id: 'home',
                                    text: 'Home',
                                    iconCls: 'x-fa fa-home',
                                    leaf: true,
                                    requires: '["extjs6test.view.main.Main"]',
                                    action: '{"xtype":"mainlist"}',
                                    closable: false
                                },
                                {
                                    id: 'user',
                                    text: 'User',
                                    iconCls: 'x-fa fa-user',
                                    leaf: true,
                                    requires: '["extjs6test.view.core.UserDashboard"]',
                                    action: '{"xtype":"core-userdashboard"}'
                                },
                                {
                                    id: 'department',
                                    text: 'Department',
                                    iconCls: 'x-fa fa-suitcase',
                                    leaf: true,
                                    requires: '["extjs6test.view.core.DepartmentManager"]',
                                    action: '{"xtype":"deptmngr"}'
                                },
                                {
                                    id: 'jurisdiction',
                                    text: 'Jurisdiction',
                                    iconCls: 'x-fa fa-cab',
                                    leaf: true,
                                    requires: '["extjs6test.view.core.JurisdictionManager"]',
                                    action: '{"xtype":"jurismngr"}'
                                },
                                {
                                    id:'dict',
                                    text:'Dict Manager',
                                    iconCls:'x-fa fa-book',
                                    leaf:true,
                                    requires:'["extjs6test.view.core.DictManager"]',
                                    action:'{"xtype":"dictmngr"}'
                                },
                                {
                                    id: 'statuspage',
                                    text: 'Status Pages',
                                    iconCls: 'x-fa fa-book',
                                    leaf: false,
                                    children: [
                                        {
                                            id: 'blankpage',
                                            text: 'Blank Page',
                                            iconCls: 'x-fa fa-clock-o',
                                            leaf: true,
                                            requires: '["extjs6test.view.statuspage.BlankPage"]',
                                            action: '{"xtype":"blankpage"}'
                                        },
                                        {
                                            id: '404page',
                                            text: '404 Error Page',
                                            iconCls: 'x-fa fa-exclamation-triangle',
                                            leaf: true,
                                            requires: '["extjs6test.view.statuspage.BlankPage"]',
                                            action: '{"xtype":"blankpage"}'
                                        },
                                        {
                                            id: '500page',
                                            text: '500 Error Page',
                                            iconCls: 'x-fa fa-exclamation-circle',
                                            leaf: true,
                                            requires: '["extjs6test.view.statuspage.BlankPage"]',
                                            action: '{"xtype":"blankpage"}'
                                        }
                                    ]
                                },
                                {
                                    id: 'group',
                                    text: 'Group',
                                    iconCls: 'x-fa fa-users',
                                    action: null,
                                    children: [
                                        {
                                            text: 'Group1 no icon',
                                            leaf: false,
                                            action: null,
                                            children: [
                                                {
                                                    text: 'Group2 no icon',
                                                    leaf: true,
                                                    action: null
                                                }
                                            ]
                                        }
                                    ]
                                },
                                {
                                    id: 'setting',
                                    text: 'Setting',
                                    iconCls: 'x-fa fa-cog',
                                    leaf: true,
                                    action: null
                                }
                            ]
                        }
                    },
                    listeners: {
                        // selectionchange:'onNavTreeMenuSelection',
                        itemclick: 'onNavTreeMenuSelection'
                    }
                }
            ]
        },
        {
            region: 'center',
            xtype: 'tabpanel',
            reference: 'contentPanel',
            style: {
                "padding-top": "2px"
            },
            tabBar: {
                flex: 1,
                layout: {
                    align: 'stretch',
                    overflowHandler: 'none'
                }
            },
            defaults: {
                tabConfig: {
                    plugins: 'responsive',
                    responsiveConfig: {
                        wide: {
                            iconAlign: 'left',
                            textAlign: 'left'
                        },
                        tall: {
                            iconAlign: 'top',
                            textAlign: 'center'
                        }
                    },
                    closable: true
                },
                bodyPadding: 15,
                bodyStyle: {
                    background: "#F6F6F6"
                }
            }
        }
    ]
});
